<template>
  <div class="pagination">
    <button @click="prev" :disabled="myCurrentPage <= 1">
      <span class="iconfont icon-arrow-left-bold"></span>
    </button>
    <ul>
      <li @click="myCurrentPage = 1" :class="{ active: myCurrentPage === 1 }">
        1
      </li>
      <li v-show="startEnd.start >= 3">
        <span class="iconfont icon-elipsis"></span>
      </li>
      <li
        @click="myCurrentPage = startEnd.start + index"
        :class="{ active: myCurrentPage === startEnd.start + index }"
        v-for="(num, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
      >
        {{ startEnd.start + num - 1 }}
      </li>
      <li v-show="startEnd.end <= totalPage - 2 && totalPage > 2">
        <span class="iconfont icon-elipsis"></span>
      </li>
      <li
        v-show="totalPage !== 1"
        @click="myCurrentPage = totalPage"
        :class="{ active: myCurrentPage === totalPage }"
      >
        {{ totalPage }}
      </li>
    </ul>
    <button @click="myCurrentPage++" :disabled="myCurrentPage >= totalPage">
      <span class="iconfont icon-arrow-right-bold"></span>
    </button>
    <select v-model="myPageSize">
      <option :value="5">每页5条</option>
      <option :value="10">每页10条</option>
      <option :value="15">每页15条</option>
      <option :value="20">每页20条</option>
    </select>
    <span class="total">总共 {{ total }}条</span>
  </div>
</template>

<script>
export default {
  name: "MyPagination",
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 100,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      myCurrentPage: this.currentPage,
      myPageSize: this.pageSize,
    };
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.myPageSize);
    },
    startEnd() {
      // 五种场景
      // ✨ 1 ... 3 4 [5] 6 7 ... 11
      // ✨ 1 [2] 3 4 5 6 ... 11   start 0 end = 4   2 6
      // ✨ 1 ...6 7 [8] 9 10 11
      // ✨ 1 2 3 4 5 6 7  ||  1 2 3 4 5 6  ||  1 2 3 4 5
      // ✨ 1 2  ||  1
      const { myCurrentPage, totalPage } = this;
      // 当小于等于两个按钮时
      if (totalPage <= 2) {
        return {
          start: 1,
          end: 0,
        };
      }
      // 当小于等于七个按钮时
      if (totalPage <= 7) {
        return {
          start: 2,
          end: totalPage - 1,
        };
      }
      // 前三种场景
      let start = myCurrentPage - 2;
      if (start < 2) start = 2;
      let end = start + 4;
      if (end > totalPage - 1) {
        end = totalPage - 1;
        start = end - 4;
      }
      return {
        start,
        end,
      };
    },
  },
  methods: {
    prev() {
      if (this.myCurrentPage <= 1) return;
      this.myCurrentPage--;
    },
  },
  watch: {
    myPageSize(myPageSize) {
      const { myCurrentPage, totalPage } = this;
      if (myCurrentPage > totalPage) {
        this.myCurrentPage = totalPage;
      }
      this.$emit("sizeChange", myPageSize);
    },
    myCurrentPage(myCurrentPage) {
      this.$emit("currentChange", myCurrentPage);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  justify-content: center;
  button {
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
    &:disabled {
      cursor: not-allowed;
      color: #eee;
    }
  }
  ul {
    display: flex;
    justify-content: center;
    margin: 0 5px;
    li {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #eee;
      margin: 0 5px;
      font-weight: 700;
      border-radius: 2px;
      cursor: pointer;
    }
    .active {
      color: #fff;
      background-color: #e1251b;
    }
  }
  select {
    margin: 0 10px;
    outline: none;
  }
  .total {
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
  }
}
</style>
